<template>
  <div class="container">
    <div id="mars3dcontent"></div>
    <div class="layercontrol">
      <div class="item" style="display: flex">
        <div style="padding: 1vh">卫星地图</div>
        <el-switch
          style="padding: 1vh"
          size="large"
          v-model="imagemap"
          @change="switchImageLayer"
        />
      </div>
      <div class="item" style="display: flex">
        <div style="padding: 1vh">管网矢量地图</div>
        <el-switch
          style="padding: 1vh"
          size="large"
          v-model="pipemap"
          @change="switchPipLine"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; //依赖的cesium库本身css
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

import { nextTick, onMounted, onUnmounted, reactive, watch } from "vue";
import { mapOptions } from "@/utils/mapOptions";
import {
  destroyMap,
  flytoView,
  transform,
  LayerCreate,
  AddGraphic,
  SptialAnalysis,
} from "@/utils/Lmap";
import { operationDataAnalysis } from "@/api/dataAnalysis/dataAnalysis";
import useAppStore from "@/store/modules/app";

import close from "@/assets/trans/close.png";
import { Coordinate } from "@element-plus/icons-vue";

import waterlevel from "@/assets/trans/waterquality.png";

let map;
let imagemap = ref(false); // 影像地图
let pipemap = ref(false); // 管线地图

let layerpoint = new mars3d.layer.GraphicLayer({ zIndex: 1 }); // 显示线的图层
let layercluster = LayerCreate.createGraphicLayer(); // 聚类图层

let tileLayer = new mars3d.layer.ArcGisLayer({
  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
  enablePickFeatures: false,
});

const config = {
  url: "https://www.cqkckc.com/geoserver/hhgw/wms",
  layers: "hhgw:pipe_line",
  parameters: {
    VERSION: "1.1.1",
    transparent: true,
    format: "image/png",
  },
  crs: "EPSG:4326",
};
let wmsLayer = new mars3d.layer.WmsLayer(config);

// 在map地图上绑定右键菜单
function bindMapDefault(map) {
  // const defaultContextmenuItems = map.getDefaultContextMenu() // 内置的默认右键菜单获取方法
  // map.bindContextMenu(defaultContextmenuItems) // 可以删减defaultContextmenuItems数组内值

  // eslint-disable-next-line no-undef
  const defaultContextmenuItems = map.getDefaultContextMenu(); // 是map.getDefaultContextMenu代码相同，用于自定义修改，代码在getDefaultContextMenu.js
  map.bindContextMenu(defaultContextmenuItems); // 可以删减defaultContextmenuItems数组内值
}

function getWaterPoint() {
  // let pointgraphic = AddGraphic.addDemoGraphic1(layercluster, transformposition[0]);
  let points = SptialAnalysis.randomPointFromPolygon();
  for (const eachdata of points.features) {
    let corrdinate = eachdata.geometry.coordinates;
    let pointgraphic = AddGraphic.addDemoGraphic1(layercluster, corrdinate, waterlevel);
    layercluster.addGraphic(pointgraphic);
  }
}

function switchImageLayer() {
  if (imagemap.value) {
    map.addLayer(tileLayer);
  } else {
    map.removeLayer(tileLayer);
  }
}

function switchPipLine() {
  if (pipemap.value) {
    map.addLayer(wmsLayer);
  } else {
    map.removeLayer(wmsLayer);
  }
}

onMounted(async () => {
  map = new mars3d.Map("mars3dcontent", mapOptions);
  map.addLayer(layerpoint);
  map.addLayer(layercluster);
  getWaterPoint();
  bindMapDefault(map);
});

onUnmounted(() => {
  destroyMap(map);
});
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
}

#mars3dcontent {
  width: 100%;
  height: 100%;
}

.layercontrol {
  position: fixed;
  top: 10vh;
  right: 10vh;
  width: 20vh;
  height: 10vh;
  border-radius: 1vh;
  background-color: white;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>
